Component({
  externalClasses: [],
  properties: {
    tags: {
      type: Array,
      value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(idx => {
        return {
          id: idx,
          title: "标签" + idx
        };
      })
    },
    activeTagIndex: {
      type: Number,
      value: null
    }
  },
  data: {
    scrollViewLeft: null,
    scrollViewWidth: null,
    activeTagIndex: null,
    activeTagId: null,
    scrollLeft: null,
  },
  created: function (options) {
    // console.log('tagsBar', 'created');
    // 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setData
  },
  attached: function () {
    // console.log('tagsBar', 'attached');
    // 组件生命周期函数，在组件实例进入页面节点树时执行
  },
  ready: function () {
    const that = this;
    this.getBoundingRect('.tags-container').then(rect => {
      that.setData({
        scrollViewLeft: rect[0].left,
        scrollViewWidth: rect[0].width,
      }, () => {
        if (that.data.activeTagIndex !== null) {
          const tagIndex = that.data.activeTagIndex;
          const tag = that.data.tags[tagIndex];
          const activeTagEleId = that.tag2TagEleId(tag);
          Promise.all([
            that.getCurrentScrollOffset(), that.getBoundingRect('#' + activeTagEleId)
          ]).then(_ => {
            const xOffset = _[0];
            const rect = _[1][0];
            const scrollLeft = parseInt(xOffset + rect.left - that.data.scrollViewLeft + rect.width / 2 - that.data.scrollViewWidth / 2);
            that.setData({
              activeTagIndex: tagIndex,
              activeTagId: tag.id,
              scrollLeft: scrollLeft,
            });
          });
        }
      });
    });
    // console.log('tagsBar', 'ready');
    // 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）
  },
  moved: function () {
    // console.log('tagsBar', 'moved');
    // 组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
  },
  detached: function () {
    // console.log('tagsBar', 'detached');
    // 组件生命周期函数，在组件实例被从页面节点树移除时执行
  },
  methods: {
    tag2TagEleId: function (tag) {
      return '_tag_' + tag.id;
    },
    tagTapped: function (e) {
      const that = this;
      const tagIndex = e.currentTarget.dataset.tagIndex;
      const activeIndex = this.data.activeTagIndex;
      if (tagIndex !== activeIndex) {
        const tag = this.data.tags[tagIndex];
        const activeTagEleId = this.tag2TagEleId(tag);
        Promise.all([
          this.getCurrentScrollOffset(), this.getBoundingRect('#' + activeTagEleId)
        ]).then(_ => {
          const xOffset = _[0];
          const rect = _[1][0];
          const scrollLeft = parseInt(xOffset + rect.left - that.data.scrollViewLeft + rect.width / 2 - that.data.scrollViewWidth / 2);
          that.setData({
            activeTagIndex: tagIndex,
            activeTagId: tag.id,
            scrollLeft: scrollLeft,
          }, () => {
            that.triggerEvent('tag-tapped', {
              tagIndex: that.data.activeTagIndex,
              tag: that.data.tags[that.data.activeTagIndex]
            });
          });
        });
      }
    },
    getBoundingRect: function (query) {
      return new Promise(resolve => {
        const wxQurey = wx.createSelectorQuery().in(this);
        wxQurey.select(query).boundingClientRect();
        wxQurey.exec(res => {
          resolve(res);
        });
      })
    },
    getCurrentScrollOffset: function () {
      return new Promise(resolve => {
        const wxQurey = wx.createSelectorQuery().in(this);
        wxQurey.select('.tags-container').scrollOffset();
        wxQurey.exec(res => {
          resolve(res[0].scrollLeft);
        });
      })
    }
  }
});